<template>
  <div id="global_option_wrap">
    <div>
      <input type="file" @change="handleFiles_imgList" accept="Application/json">
      <input type="file" @change="_event => handleFiles(_event, 1)" accept="video/*">
      <input type="file" @change="handleFiles" accept="image/*">
    </div>
    <div>
      <button @click="clearAll(1)">清空</button>
      <button @click="clearAll">清空(保留缓存)</button>
    </div>
    <hr>
    <div>
      
    </div>
  </div>



  <!-- <ul>
    <li v-for="(val, key, i) in imgSet" :key="(val, key, i)">
    </li>
  </ul> -->

  <!-- <ul :key="update"> -->
  <ul>
    <li v-for="(e, i) in output" :key="(e, i)" class="img_wrap">
      <h3><span>></span> {{ e.name }}</h3>
      <div class="second_wrap">
        <div class="portal_wrap">
          <div>
            <span>层级: </span> {{ e.index }}
          </div>
          <div>
            <span>移动: </span> <input type="number" step="0.01" value="0.1">
          </div>
          <div>
            <span>旋转: </span> <input type="number" step="0.01" value="0.1">
          </div>
          <div>
            <span>缩放: </span> <input type="number" step="0.01" value="0.1">
          </div>

        </div>
        <div class="layer" @click="goto_blobUrl(e.content)">
          <img v-if="e.type == 0" :src="e.content" :alt="key">
          <video autoplay muted v-if="e.type == 1" :src="e.content" :alt="key"></video>
        </div>
      </div>

    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const imgSet = ref('')
const output = ref([])

const globalConfig = {
}

// const update = ref(0)
// const globalIndex = ref(0)

function handleFiles(event, type = 0) {
  let file = event.target.files

  if (file.length) {
    const reader = new FileReader()
    // const BlobUrl = new FileReader()

    reader.readAsDataURL(file[0])
    // BlobUrl.readAsArrayBuffer(file[0])

    reader.onload = () => {

      console.log(file.type)

      output.value.push({
        name: file[0].name,
        content: reader.result,
        index: output.value.length,
        type: type
      })
    }
  }
}

function handleFiles_imgList(event) {

  const reader = new FileReader()

  reader.onload = () => {
    imgSet.value = JSON.parse(reader.result)

    // 清空
    for (let k in imgSet.value) {
      output.value.push({
        name: k,
        content: imgSet.value[k],
        index: output.value.length,
        type: 0
      })
    }

    sessionStorage.setItem('temp_FilesList', JSON.stringify(output.value))
  }
  reader.readAsText(event.target.files[0])

}

// 
window.addEventListener('load', () => {
  let temp = JSON.parse(sessionStorage.getItem('temp_FilesList'))
  output.value = temp ?? []

})


// 
function clearAll(saveCache) {

  output.value = []
  if (saveCache == 1) sessionStorage.removeItem('temp_FilesList')

}

function goto_blobUrl(base64) {
  const contentType = base64.slice(base64.lastIndexOf(':') + 1, base64.lastIndexOf(';'))
  return fetch(base64)
    .then(response => response.blob())
    .then(blob => {
      const blobUrl = window.URL.createObjectURL(new Blob([blob], {
        type: contentType
      }))

      window.open(blobUrl, '_blank')
    })
}

//

</script>

<style>
html {
  font-size: 24px;
}

li {
  list-style-type: none;
}

img {
  vertical-align: middle;
}
</style>

<style lang="less">
#global_option_wrap {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}


.img_wrap {
  transition: all .3s;
  padding: .3rem;


  .second_wrap {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .portal_wrap {
    width: 30%;
    position: relative;

    >div {
      display: flex;

      >* {
        width: 6em;
      }
    }

    /*
    &::before {
      content: '';
      position: absolute;
      right: 0;
      height: 80%;
      width: .2rem;
      background: #00000066;
    }
    */
  }

  .layer {
    cursor: pointer;
    
    >* {
      max-width: 90%;
      margin-left: 5%;
      max-height: 4rem;
    }
  }

  &:hover {
    background: #00000033;

    img,
    video {
      background: #fff;
      box-shadow: .06rem .06rem .1rem #00000055;
    }
  }
}
</style>
